@import "../../colors";
@import "../../frameless";
$timeline-breakpoint: "only screen and (max-width : 1030px)";

.timeline-card{
  max-width: 460px;
  z-index: 2;

  @media #{$small} {
    max-width: 300px;
  }

  background-color: $ui-white;
  border-radius: 8px;
  position: relative;
  margin-bottom: 30px;

  .timeline-content {
    margin: 15px;
    text-align: left;
    p {
      margin: 10px 0 0;
      line-height: 1.5;
    }
    a{
      position: absolute;
      right: 12px;
      top: 1px;
    }

    img{
      margin-top: 10px;
      width: 100%;
    }
    .video-preview{
      margin-top: 15px;
      img{
        margin-top: 0px;
      }
    }
  }
  &.center{
    margin: 0 auto 30px;
  }
  &.left{
    margin-left: calc((100% - 980px)/2);
    @media #{$timeline-breakpoint} {
      margin: 0 auto 30px;
    }
  }
  &.right{
    margin-left: calc(100% - ((100% - 980px)/2) - 470px);
    @media #{$timeline-breakpoint} {
      margin: 0 auto 30px;
    }
  }
}